<!DOCTYPE html>
<html lang="en">
<head>
	<meta encoding="utf8">
	
	<style type="text/css" media="screen">
		#item {
			width: 600px;
			height: 400px;
			background: #666;
			margin: 30px auto;
		}
		
		#position {
			width: 600px;
			margin: 0 auto;
		}
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>	
	<script src="jquery.hotspot.js"></script>
	
	<script>
	
	$(function(){
		var $item = $('#item');
	
		$item.bind('changed.hotspot', function( e, row, col ){
			$('#position span').text('row: '+row+' col: '+col );
		});

		$item.bind('clicked.hotspot', function( e, row, col ){
			alert('CLICKED: row: '+row+' col: '+col );
		});
		
		$item.hotspot({rows:3,cols:3 });		
	});
	
	
	</script>

	<title>HotSpot</title>
</head>
<body>
	
	<div id="item">
		
	</div> <!-- /item -->
	
	<p id="position">Position: <span></span></p>
	
</body>	
</html>